
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style type="text/css">
        ul,li{
            padding:0;
            margin:0;
        }
        .box{
            width: 100px;
            position:relative;
            margin:0 auto;
        }
        .box .title{
            background-color:greenyellow;
        }
        .box .title,ul li{
            width: 100px;
            height: 40px;
            font:20px/40px microsoft yahei;
            list-style:none;
            text-align:center;
            border-bottom:1px solid #ccc;
            transition:all 3s;
        }

        ul{
            position:absolute;
            height: 0;
            overflow:hidden;
            top:41px;
            left:0;
            transition:all 1s;

        }
        .hover{
            background-color:greenyellow;
        }
        .active{
            background-color:red;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="title">
        好友选项
    </div>
    <ul>
        <li>好友</li>
        <li>同学</li>
        <li>黑名单</li>
    </ul>
</div>
<script>
    var Title=document.getElementsByClassName("title")[0];
    var Oul=document.getElementsByTagName("ul")[0];
    var Oli=Oul.getElementsByTagName("li");
    Title.onmouseover=function(){
        Oul.style.height="122"+"px";
        Oul.className="hover";
    }
    for(var i=0;i<Oli.length;i++){
        Oli[i].onclick=function(){
            //排他思想
            for(var j=0;j<Oli.length;j++){
                Oli[j].className="hover";
            }
            this.className="active";
            Oul.style.height="0";
        }
    }
</script>
</body>
</html>
